<template>
  <div class="TJ_currency">
    <div class="query">
      区域：
      <el-select
        v-model="area1"
        placeholder="请选择"
        size="small"
        style="width: 150px"
        @change="getoptions2"
        filterable
        disabled
      >
        <el-option
          v-for="item in options1"
          :key="item.Code"
          :label="item.Name"
          :value="item.Code"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="area2"
        placeholder="请选择"
        size="small"
        style="width: 150px"
        @change="getoptions3"
        filterable
      >
        <el-option
          v-for="item in options2"
          :key="item.Code"
          :label="item.Name"
          :value="item.Code"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="area3"
        placeholder="请选择"
        size="small"
        style="width: 150px"
        filterable
        @change="getoptions4"
      >
        <el-option
          v-for="item in options3"
          :key="item.Code"
          :label="item.Name"
          :value="item.Code"
        >
        </el-option>
      </el-select>

      <el-button
        icon="el-icon-search"
        size="small"
        style="margin-left: 10px"
        type="primary"
        @click="getList"
      ></el-button>
    </div>
    <div class="main">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        height="650"
        :header-cell-style="{
          color: '#000',
          backgroundColor: 'rgb(157,201,210)',
          fontFamily: 'FangSong',
        }"
        v-loading="isTableLoading"
      >
        <el-table-column prop="AreaCode" label="地区编码"> </el-table-column>
        <el-table-column prop="AreaName" label="地区名称"> </el-table-column>
        <el-table-column prop="Data.count" label="家庭数量">
          <template slot-scope="scope">
            <a style="color: blue" @click="goto_list(scope.row)">{{
              scope.row.Data.count
            }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="Data.signCount" label="签约家庭数量">
        </el-table-column>
        <el-table-column prop="Data.memberCount" label="成员数量">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options1: [],
      options2: [],
      options3: [],
      area1: "532323",
      area2: "",
      area3: "",
      areaCode: "",
      tableData: [],
      isTableLoading: false,
    };
  },
  filters: {},
  mounted() {
    this.getoptions1();
    this.getoptions2();
    this.getList();
  },
  methods: {
    getoptions1() {
      this.$post("/Family/AreasList").then((res) => {
        this.options1 = res.Data;
      });
    },
    getoptions2() {
      if (this.area1) {
        this.$post("/Family/AreasList?parentCode=" + this.area1).then((res) => {
          this.options2 = res.Data;
          this.areaCode = this.area1;
        });
      } else {
        this.area2 = "";
        this.area3 = "";
        this.options2 = [];
        this.options3 = [];
        this.areaCode = "";
      }
    },
    getoptions3() {
      if (this.area2) {
        this.$post("/Family/AreasList?parentCode=" + this.area2).then((res) => {
          this.options3 = res.Data;
          this.areaCode = this.area2;
        });
      } else {
        this.area3 = "";
        this.options3 = [];
        this.areaCode = "";
      }
    },
    getoptions4() {
      if (this.area3) {
        this.areaCode = this.area3;
      } else {
        this.areaCode = "";
      }
    },
    getList() {
      this.isTableLoading = true;
      this.$post("/Family/AreasStatistics?parentCode=" + this.areaCode).then(
        (res) => {
          this.tableData = res.Data;
          this.isTableLoading = false;
        }
      );
    },
    goto_list(row) {
      console.log(row);
      // this.$router.push("/home?areaCode=" + row.AreaCode);
      window.open(
        "/#/home_home?areaCode=" +
          row.AreaCode +
          "&token=" +
          window.sessionStorage.getItem("Token"),
        "明细列表",
        "height=850,innerHeight=850,width=1200,innerWidth=1200,top=200,left=400,toolbar=no,menubar=no,scrollbars=auto,resizable=no,location=no,status=no"
      );
    },
  },
};
</script>

<style scoped lang='scss'>
.TJ_currency {
  height: calc(100vh - 46px);
  background-color: #fff;
  .query {
    padding: 5px;
  }
  .main {
    margin: 5px;
    border: 1px solid #333;
    padding: 15px 5px;
  }
  .Name_sty {
    font-weight: 700;
    border-bottom: 2px dashed red;
  }

  .num_sty {
    color: blue;
    border-bottom: 1px solid blue;
  }
}
</style>